// src/components/thumbnail.tsx
/* eslint-disable @next/next/no-img-element */
import React from 'react';
import {Dialog, DialogContent, DialogTitle, DialogTrigger} from "@/components/ui/dialog";

interface Props {
    url: string | null | undefined
}

const Thumbnail = ({url}: Props) => {
    if (!url) return null;

    return (
        <Dialog>
            <DialogTrigger>
                <div className={`relative overflow-hidden max-w-[360px] border
                 rounded-lg my-2 cursor-zoom-in`}>
                    <img src={url} alt="Message image" className={`rounded-md object-cover size-full`}/>
                </div>
            </DialogTrigger>
            <DialogContent className={`max-w-[800px] border-none bg-transparent p-0 shadow-none`}>
                {/*warning: dialog content need a title*/}
                <DialogTitle></DialogTitle>
                <img src={url} alt="Message image" className={`rounded-md object-cover size-full`}/>
            </DialogContent>
        </Dialog>
    );
};

export default Thumbnail;